
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客户端管理</title>
    <meta name="keywords" content="qadmin,qadmin模板,后台模板,qadmin后台模板">
    <meta name="description" content="qadmin是一个轻量级后台模板,基于layui框架开发,简洁而不简单">
    <link rel="stylesheet" href="./assets/layui/css/layui.css">
    <link rel="stylesheet" href="./assets/admin/css/style.css">
    <script src="./assets/layui/layui.js"></script>
    <script src="./assets/js/jquery-3.3.1.min.js"></script>
    <script src="./assets/js/vue.min.js"></script>
    <script src="./assets/admin/js/common.js"></script>
    <script src="./assets/admin/js/config.js"></script>
</head>
<body>

<div id="app">
    <!--顶栏-->
    <#include "inc/header.ftl">

    <div class="main">
        <!--左栏-->
        <#include "inc/left-menu.ftl">
        <!--右侧-->
        <div class="right p20">



<div class="layui-row">
    <div class="layui-col-lg8">
        <button class="layui-btn" @click="createClient">添加客户端</button>
    </div>

    <div class="layui-col-lg4" style="text-align: right">

    </div>
</div>

<table class="layui-table layui-form">

    <thead>
    <tr>
        <th class="col1">名称</th>
        <th>ClientKey</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

        <tr v-for="c,i in clients" v-key="c.id">
            <td class="col1">{{c.name}}</td>
            <td>{{c.clientKey}}</td>
            <td>
                <div :class="c.online?'online':'offline'">{{c.online?'在线':'离线'}}</div>
            </td>
            <td>
                <button class="nt-btn layui-btn layui-btn-sm" @click="modifyClient(c)">修改名称</button>
                <button class="nt-btn layui-btn layui-btn-sm layui-btn-danger" @click="delClient(c)">删除</button>
            </td>
        </tr>


    </tbody>
</table>




        </div>
    </div>
</div>
<div id="box1">
    <form action="" class="layui-form ">
        <div class="layui-form-item">
            <label class="layui-form-label">客户端名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required="required" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button lay-submit="" lay-filter="submit" class="layui-btn">立即提交</button>
            </div>
        </div>
    </form>
</div>
<script>

    layui.use('form', function () {
        var form = layui.form,
            layer = layui.layer;
    });



    var vue = new Vue({
        el:'#app',
        data:{
            clients:getCacheClients()||[],
            clientKey:getQueryVariable('clientKey'),
        },
        created:function(){
            var that = this;
            this.loadClients();
        },
        methods:{
            loadClients() {
                var that = this;
                $.post('/api/client/list',{},function (ret){
                    that.clients = ret.clients;
                    localStorage.setItem('clients',JSON.stringify(that.clients));
                })
            },
            delClient(client) {
                var that = this;
                console.log(client)
                layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){
                    layer.close(index);
                    $.post('/api/client/delete',{id:client.id},function (ret) {
                        console.log(ret)
                        if (ret.code == 200) {
                            that.loadClients();
                            layer.alert('删除成功');
                        }
                    })
                });
            },
            createClient() {
                var that = this;
                layer.prompt({
                    formType: 0,
                    value: '',
                    title: '请输入终端名称',
                    btn: ['确认创建','取消'], //按钮，
                    btnAlign: 'c'
                }, function(value,index){
                    layer.close(index);
                    $.post('/api/client/create',{name:value},function (ret) {
                        console.log(ret)
                        if (ret.code == 200) {
                            that.loadClients();
                            layer.msg('修改成功');
                        }
                    });
                });
            },
            modifyClient(client) {
                var that = this;
                layer.prompt({
                    formType: 0,
                    value: client.name?client.name:'',
                    title: '请输入终端名称',
                    btn: ['确认修改','取消'], //按钮，
                    btnAlign: 'c'
                }, function(value,index){
                    layer.close(index);
                    $.post('/api/client/update',{id:client.id,name:value},function (ret) {
                        console.log(ret)
                        if (ret.code == 200) {
                            that.loadClients();
                            layer.msg('修改成功');
                        }
                    });
                });
            },


        }
    })

</script>
</body>
</html>
<style>
    .nt-btn {
        height: 24px;
        line-height: 24px;
    }
    .col1{
        /*width: 150px;*/
    }
    .online{
        border: 1px solid #5fb878;
        background-color: #5fb878;
        color: #FFFFFF;
        display: inline-block;
        padding: 1px 8px;
        border-radius: 3px;
        font-size: 12px;
    }
    .offline{
        border: 1px solid #b2b2b2;
        background-color: #f2f2f2;
        color: #999;
        display: inline-block;
        padding: 1px 8px;
        border-radius: 3px;
        font-size: 12px;
    }
</style>